<ion-header>
  <ion-toolbar>
    <ion-buttons right>
      <button *ngIf="!rest.validated" [disabled]=this.rest.viewOnly ion-button icon-right (click)="nav2validate()">
        <ion-icon class="nav-back" name="add"></ion-icon>
      </button>
      <button *ngIf="rest.validated" ion-button icon-right (click)="nav2scan()">
        <ion-icon class="nav-back" name="add"></ion-icon>
      </button> </ion-buttons>
    <ion-title>{{"deviceTitle" | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-row>
    <ion-col>
      <div>{{'deviceID' | translate}}</div>
    </ion-col>
    <ion-col>
      <div>{{'nickName' | translate}}</div>
    </ion-col>
    <ion-col>
      <div>{{'netwkStatus' | translate}}</div>
    </ion-col>
    <ion-col>
      <div>{{'bindStatus' | translate}}</div>
    </ion-col>
  </ion-row>
  <ion-row *ngFor="let device of devices">
    <ion-col *ngIf="this.rest.viewOnly">
        {{device.id}}
    </ion-col>
    <ion-col *ngIf="!this.rest.viewOnly" (press)="pressEvent($event)">
      {{device.id}}
      <!-- <div> -->
      <!-- {{this.device}} -->
      <!-- <img width="30" src="../../assets/imgs/leave.png" /> -->
      <!-- </div> -->
    </ion-col>
    <ion-col>
      <div>{{device.name}}</div>
    </ion-col>
    <ion-col>
      <ion-checkbox disabled="true" checked={{device.netwk&&device.bind}}></ion-checkbox>
    </ion-col>
    <ion-col *ngIf="!rest.validated && !this.rest.viewOnly" (click)="nav2validate()">
      <ion-checkbox disabled="!rest.validated" [(ngModel)]="device.bind" (ionChange)="bindunbind(device)"></ion-checkbox>
    </ion-col>
    <ion-col *ngIf="!rest.validated && this.rest.viewOnly">
      <ion-checkbox disabled="!rest.validated" [(ngModel)]="device.bind" (ionChange)="bindunbind(device)"></ion-checkbox>
    </ion-col>
    <ion-col *ngIf="rest.validated">
      <ion-checkbox disabled={{device.disabled}} [(ngModel)]="device.bind" (ionChange)="bindunbind(device)"></ion-checkbox>
    </ion-col>
  </ion-row>
</ion-content>
